<template>
  <div class="table" v-infinite-scroll="loadmore">
    <div class="lines header">
      <div class="line1">排名</div>
      <div class="line2">股票名称</div>
      <div class="line3">购买日期</div>
      <div class="line4">有效期限</div>
    </div>
    <div class="header-placeholder"></div>
    <div
      class="lines body"
      v-for="({ stockCode, stockName, marketId, startDate, endDate, isPrime }, index) in showList"
      :key="stockCode"
      @click.stop="clickRow({ stockCode, stockName, marketId })"
    >
      <div v-if="[0, 1, 2].includes(index)" class="line1">
        <div :class="`sequence-img sequence-${index + 1}`"></div>
      </div>
      <div v-else class="line1 sequence">
        {{ index + 1 }}
      </div>
      <div class="line2">
        <div class="stockname">{{ stockName }}</div>
        <div class="stockcode-container">
          <div :class="{ 'purchase-type': true, prime: isPrime }">
            {{ isPrime ? '专业' : '基础' }}版
          </div>
          <div class="stockcode">{{ stockCode }}</div>
        </div>
      </div>
      <div class="line3">{{ startDate }}</div>
      <div class="line4">{{ endDate }}</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { jumpByUrl } from '@/utils';
import { List } from '@/types/purchased.d';
import vInfiniteScroll from '@/directives/infiniteScroll.js';
import { computed, ref } from 'vue';
interface Props {
  list: List[];
}
const props = withDefaults(defineProps<Props>(), {
  list: () => [],
});
const index = ref<number>(1);
const pageNum: number = 20;
const showList = computed(() => props.list.slice(0, index.value * pageNum));

const loadmore = () => {
  index.value++;
};
// 点击跳转详情页
const clickRow = ({
  stockCode,
  stockName,
  marketId,
}: Pick<List, 'stockCode' | 'stockName' | 'marketId'>) => {
  jumpByUrl({
    name: 'stock',
    query: {
      stockCode: stockCode,
      market: marketId,
      stockName: stockName,
    },
  });
};
</script>

<style scoped lang="less">
.table {
  .header-placeholder {
    height: 71px;
  }
  .header {
    position: fixed;
    height: 70px;
    border-top: 1px solid var(--text-1);
    z-index: 2;
    background-color: var(--bg-color-2);
    div {
      color: var(--text-2);
      font-family: PingFang SC;
      font-size: 28px;
      line-height: 32px;
    }
    .line3,
    .line4 {
      padding-left: 70px;
    }
  }
  .header.lines::after {
    content: '';
    position: absolute;
    width: 686px;
    left: 32px;
    bottom: 0;
    border-top: 1px solid var(--text-5);
  }
  .body {
    position: relative;
    height: 105px;
    &::before {
      position: absolute;
      content: '';
      top: 0;
      width: 686px;
      margin-left: 32px;
      border-top: 1px solid var(--text-1);
    }
    .stockname {
      color: var(--text-3);
      font-family: PingFang SC;
      font-size: 32px;
      line-height: 42px;
    }
    .stockcode-container {
      display: flex;
      align-items: center;
      .purchase-type {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 82px;
        height: 34px;
        border-radius: 4px;
        background: var(--bg-color-3);
        color: var(--text-2);
        font-family: PingFang SC;
        font-size: 22px;
        margin-right: 4px;
        &.prime {
          color: rgba(233, 48, 48, 1);
          background: rgba(233, 48, 48, 0.08);
        }
      }
      .stockcode {
        color: var(--text-4);
        font-family: THS JinRongTi;
        font-weight: 500;
        font-size: 24px;
        line-height: 28px;
      }
    }
    .line3,
    .line4 {
      color: var(--text-3);
      font-family: THS JinRongTi;
      font-weight: 500;
      font-size: 32px;
    }
  }
  .body.lines {
    position: relative;
    &::after {
      content: '';
      position: absolute;
      width: 686px;
      left: 32px;
      bottom: 0;
      border-top: 1px solid var(--text-5);
    }
  }
  .lines {
    display: flex;
    align-items: center;
    text-align: left;
    div {
      box-sizing: border-box;
      flex-shrink: 0;
    }
    .line1 {
      display: flex;
      justify-content: center;
      width: 110px;
    }
    .line2 {
      width: 180px;
    }
    .line3 {
      width: 230px;
    }
    .line4 {
      width: 230px;
    }
    .sequence {
      font-family: THSJinRongTi-Bold;
      font-size: 36px;
      color: #595959;
      letter-spacing: 0.4px;
      font-weight: bolder;

      &-img {
        width: 40px;
        height: 40px;
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
      }
    }
    .sequence-1 {
      background-image: url(//i.thsi.cn/staticS3/mobileweb-upload-static-server.img/m/atom/c52fc5ce-f987-4a08-80d9-b7d82e9b4134.png);
    }

    .sequence-2 {
      background-image: url(//i.thsi.cn/staticS3/mobileweb-upload-static-server.img/m/atom/b5d626bc-0cf7-4cbd-8a8e-e345effcf44d.png);
    }

    .sequence-3 {
      background-image: url(//i.thsi.cn/staticS3/mobileweb-upload-static-server.img/m/atom/fe88c269-67b6-46fe-a866-0683cccd520d.png);
    }
  }
}
</style>
